<style lang="scss" scoped>
  .goods-group-wrap{
    background: #f2f2f2;
    padding: 30rpx;
    width: 690rpx;
    .goods-item{
      background: #fff;
      border-radius: 6px;
      margin-bottom: 20px;
      box-shadow: rgba(0,0,0,.1) 0 0 10px 0;
      overflow: hidden;
      .info{
        padding: 20rpx;
      }
      .thumb{
        width: 690rpx;
        height: 345rpx;
        @include cover-img();
      }
    }
  }
  .go{

  }
</style>
<template>
  <view class="goods-group-wrap">
      <view v-for="(goods,idx) in lists" :key="idx" class="goods-item" @click="toDetail(goods)">
        <div class="thumb" :style="{backgroundImage:'url('+goods.logo+')'}"></div>
        <view class="info">
          <view class="m-t-10 m-b-10 fz-16">{{ goods.title }}</view>
          <view class="m-b-8">
            <span class="price-selling">￥{{ goods.price_selling }}</span>
            <span class="price-market m-l-8 fz-12 text-through">￥{{ goods.price_market }}</span>
          </view>
          <div class="fun-btn primary small go" >立即预订</div>
        </view>
      </view>

  </view>
</template>
<script>

import { goods } from '@/api'
import { Exception } from '@/common/Exception'
import { error, linkToEasy } from '@/common/fun'

export default {
  props: {
    ids: {
      require: true,
      type: String
    }
  },
  data () {
    return {
      lists: []
    }
  },
  watch: {
    ids: {
      immediate: true,
      handler (val) {
        if (val) this._init_func(val)
      }
    }
  },
  methods: {
    toDetail (goods) {
      if (goods.type === 'goods') {
        linkToEasy('/pages/goods/goods?id=' + goods.id)
        return
      }
      error('等待开放')
    },
    async _init_func (ids) {
      console.log(ids.split('|'))
      const idsStr = ids.split('|').join(',')
      this.lists = await goods({
        filter: `id:${idsStr}`,
        op: 'in',
        size: 0
      }).then(res => res.data).catch(err => Exception.handle(err))
    }
  }

}
</script>
